import React from 'react';
import {DataTypes, EchartColors} from '@assets/config/global_config.js';
// echart
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legendScroll';

export default class EchartPie extends React.Component {

    constructor(props) {
        super(props);
        this.echartDom = null;
        this.systemEchart = null;
    }

    componentDidMount() {
        this.echartConfig();
    }

    echartConfig() {
        this.systemEchart = echarts.init(this.echartDom);
        let {data} = this.props;

        let echartData = Object.keys(DataTypes).map(item => {
            let duration = data[item]['duration'];
            return {
                label: {show: !!duration},
                name: DataTypes[item],
                value: duration
            };
        });

        let option = {
            color: EchartColors,
            title: {
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                },
                left: 'center',
                bottom: '0'
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: '#3d83fe',
                padding: [5, 10],
                formatter: '{b}：{c} h<br/>占比：{d}%',
                extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);'
            },
            legend: {
                itemWidth: 14,
                itemHeight: 14,
                orient: 'horizontal',
                left: 20,
                selectedMode: false,
                textStyle: {color: '#fff'}
            },
            series: [{
                type: 'pie', radius: '85%',
                center: ['50%', '52%'],
                label: {normal: {position: 'inside'}},
                data: echartData,
                itemStyle: {
                    emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}
                }
            }]
        };
        this.systemEchart.setOption(option, true);
    }

    render() {
        return (
            <div className="echart-box" ref={node => this.echartDom = node}>

            </div>
        )
    }
}